<template>
  <div>
    <headerMiddle title="编辑资料"></headerMiddle>
    <div class="avatar">
      <img :src="profile.head_img" alt class="avatar-img" />
      <!-- after-read在选择图片后被触发 -->
      <van-uploader :after-read="afterRead" class='fileUploader' />
    </div>
    <cellBar label="昵称" :desc="profile.nickname" @jump="isShowNickname=true" />
    <cellBar label="密码" desc="*****" @jump="isShowPwd=true"/>
    <cellBar label="性别" :desc="profile.gender" @jump="isShowGender=true" />

    <!-- 以下用来放组件，并不是实际显示的地方  -->
    <!-- v-model用来控制是否显示,title用来控制标题，show-cancel-button
    用来控制是否显示取消按钮-->
    <van-dialog v-model="isShowNickname" title="编辑昵称" show-cancel-button @confirm="editProfile({nickname:newNickname})">
      <!-- 放入一个输入框 -->
      <van-field v-model="newNickname" placeholder="请输入昵称" />
    </van-dialog>

    <van-dialog
        v-model="isShowPwd"
        title="编辑密码"
        show-cancel-button
        @confirm="editProfile({password:newPwd})"
        >
            <!-- 这里要嵌入一个输入框 -->
            <!-- 输入框可以使用一个叫 type 属性控制这个输入框的类型 -->
            <van-field type="password" v-model="newPwd" placeholder="请输入密码" />
    </van-dialog>
    <!-- action是存放所有选项的数组 -->
    <!-- select是选择后的回调函数处理 -->
    <van-action-sheet 
            v-model="isShowGender" 
            :actions="genderList" 
            @select="selectGender" 
            cancel-text="取消" />
  </div>
</template>

<script>
import headerMiddle from "../components/headerMiddle";
import cellBar from "../components/cellBar";
export default {
  components: {
    headerMiddle: headerMiddle,
    cellBar: cellBar
  },
  data() {
    return {
      isShowNickname: false,
      isShowPwd:false,
      isShowGender:false,
      genderList:[
          {
              name:'男'
          },
          {
              name:'女'
          }
      ],
      newNickname: "",
      newPwd:'',
      profile: {}
    };
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user/" + localStorage.getItem("user_id"),
        method: "get",
        headers: {
          Authorization: localStorage.getItem("token")
        }
      }).then(res => {
        // console.log(res);
        this.profile = res.data.data;
        if (!this.profile.head_img) {
          // 如果数据库没有头像，则强行设置一个头像
          this.profile.head_img = "/static/jieni.jpg";
        } else {
          this.profile.head_img =
            this.$axios.defaults.baseURL + this.profile.head_img;
        }
        this.profile.gender = this.profile.gender == 0 ? "小姐姐" : "小哥哥";
      });
    },
    selectGender(item){
        // console.log('你选择了'+item.name)
        this.editProfile({
            gender: item.name == '男' ? 1 : 0
        })
        this.isShowGender = false;
    },
    afterRead(fileItem){
        // console.log(fileItem)
        // 要上传的图片在fileItem.file中
        // 图片上传必须以二进制形式
        const data = new FormData();
        // 将图片放入file字段中，转化为二进制流
        data.append('file',fileItem.file);
        // 这个data就变成可以直接上传的数据嗷,发送请求
        this.$axios({
            url:'/upload',
            method:'post',
            data:data,
            headers: {
                    Authorization: localStorage.getItem('token')
            }
        }).then(res=>{
            // console.log(res.data);
            this.editProfile({
                head_img:res.data.data.url
            })
        })

    },
    editProfile(newData){
        // 点击确认按钮后，发送请求更新数据
        this.$axios({
            url:'/user_update/'+localStorage.getItem('user_id'),
            method:'post',
            headers: {
                    Authorization: localStorage.getItem('token')
            },
            data:newData
        }).then(res=>{
            console.log(res.data)
            this.loadPage()
        })
    }
  },
  mounted() {
    // 页面一加载，发送请求获取数据
        this.loadPage();
  }
};
</script>

<style lang="less" scoped>
.avatar {
  padding: 8.333vw;
  text-align: center;
  position: relative;
}
.fileUploader{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;

}
.avatar-img {
  width: 19.444vw;
  border-radius: 50%;
}
</style>